<template>
	<div class="child">
		<h1>我是Child组件</h1>

		<!-- 第一种实现方式，靠v-model，较真来说是有点不合理的，毕竟改了props -->
		<!-- <input type="checkbox" v-model="obj.agree"> 同意协议 -->

		<!-- 第二种实现方式，靠checked属性 + click事件，写起来麻烦，但很合理 -->
		<input type="checkbox" :checked="obj.agree" @click="handleClick"> 同意协议
	</div>
</template>

<script>
	export default {
		name:'Child',
		props:['obj','checkAgree'],
		methods:{
			handleClick(e){
				//获取用的勾选与取消勾选
				let {checked} = e.target
				//告诉父组件checked的值
				this.checkAgree(checked)
			}
		}
	}
</script>

<style>
	.child{
		background-color: skyblue;
		padding: 20px;
	}
</style>